<template>
  <div class="footer">
    <div class="item" v-for="(item, index) in tabbar" :key="item.index">
      <router-link v-bind:to="item.url">
        <img v-show="url === item.url" v-bind:src="item.selectImg" alt>
        <img v-show="url !== item.url" v-bind:src="item.img" alt>
        <div class="price">{{item.name}}</div>
      </router-link>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      selectIndex: 0,
			url: "",
      tabbar: [
        {
          img: require("../../images/icon/home.png"),
          selectImg: require("../../images/icon/home-selected.png"),
          name: "首页",
          url: "/home"
        },
        {
          img: require("../../images/icon/gift.png"),
          selectImg: require("../../images/icon/gift-selected.png"),
          name: "活动",
          url: "/activity"
        },
        {
          img: require("../../images/icon/info.png"),
          selectImg: require("../../images/icon/info-selected.png"),
          name: "消息",
          url: "/info"
        },
        {
          img: require("../../images/icon/person.png"),
          selectImg: require("../../images/icon/person-selected.png"),
          name: "我的",
          url: "/my"
        }
      ]
    };
  },

  mounted() {
		this.url = window.location.href.split('/#')[1];
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

.footer {
  @include fj(space-around);
  @include sc(0.28rem, #ddd);

  align-items: center;
  background: #fff;

  position: fixed;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 1.5rem;

  border-top: 2px solid #f1f1f1;

  img {
    height: 0.5rem;
    width: 0.5rem;
  }
}
</style>
